import React, {memo, useEffect,useState} from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { getAdminMessageAction } from '../../store/adminsStore/adminCreators';
import { Table, Tag, Space, Divider, Modal, Spin,Button,message} from 'antd';

//自定义函数
import { deleteAdminRequest } from '../../services/Admin';

export default memo(function AdminManage() {
    const {adminMessage} = useSelector(state => ({
        adminMessage: state.getIn(["administrator","adminMessage"])
    }), shallowEqual);
    const user = useSelector(state => state.getIn(["user"]),shallowEqual);

    const [isVisable, setIsVisable] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [currentDeleteAdmin, setCurrentDeleteAdmin] = useState({});
    const [isReload, setIsReload ] = useState(false);
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(getAdminMessageAction())
        // console.log(adminMessage);
    },[dispatch])

    
    const deleteAdmin = (text,record) => {
      // console.log(text, record);
      setCurrentDeleteAdmin(text);
      // console.log('deleteAdmin');
      setIsVisable(true);
    }
    //弹窗确定的回调函数
    const onOk = ()=> {
      // console.log('ok');
      setIsLoading(true);
      //判断这个管理员是否是超级管理员，如果不是就不能删除
      // console.log(user);
      const currentAdmin = user;
      console.log("currentAdmin:",currentAdmin);
      console.log("currentDeleteAdmin", currentDeleteAdmin);
      if(currentAdmin.admin_permission !== 1 || (currentDeleteAdmin.admin_id === currentAdmin.admin_id))
      {
        // console.log("不行");
        setIsLoading(false);
        setIsVisable(false);
        message.warning("无权限进行该操作！！");
      }
      else
      {
        //超级管理员删除的情况，需要发送网络请求
        //将要删除的管理员的信息发送给后端，后端发送是否删除
        deleteAdminRequest(currentDeleteAdmin.admin_id).then(res => {
          // console.log("删除用户的网络请求");
          setIsLoading(false);
          setIsVisable(false);
          if(res.code === 200)
          {
            message.success({
              content:"管理员删除成功"
            });
            //需要重新刷新页面
            setIsReload(true);
            
          }
          else{
            message.error("管理员删除出错……");
          }

        }).catch(err => {
            message.error("删除管理员出错……");
            setIsLoading(false);
            setIsVisable(false);//弹窗消失
        })
      }
    }

    //弹窗取消的回调函数
    const onCancel = ()=> {
      // console.log('cancel');
      setIsVisable(false);
    }

    const columns = [
        {
          title: 'ID',
          dataIndex: 'admin_id',
          key: 'admin_id',
          render: text => <a href={'##'}>{text}</a>
            ,
        },
        {
          title: '管理员名称',
          dataIndex: 'admin_name',
          key: 'admin_name',
        },
        {
          title: '管理员密码',
          dataIndex: 'admin_password',
          key: 'admin_password',
          render:password => {
            return (
              <span>XXXXXXXX</span>
            )
          }
        },
        {
          title: '管理员权限',
          key: 'admin_permission',
          dataIndex: 'admin_permission',
          render: permission => {
              let color = 'blue';
              let showText = '普通管理员';
              if(permission === 1)
              {
                  color = 'red';
                  showText = '超级管理员';
              }
              return (
                <>
                    <Tag color={color} key={permission}>
                        {showText}
                    </Tag>
                </>
              )
          }
            
        
        },
        {
          title: '操作',
          key: 'action',
          render: (text, record) => (
            <Space size="middle">
              {/* <a href={'###'}>修改</a> */}
              <Button type="link" onClick={e => deleteAdmin(text,record)}>删除</Button>
            </Space>
          ),
        },
      ];

    useEffect(() => {

    },[isVisable, isReload])
  

    
    return (
        <div>
            <Divider orientation="left">管理员信息页</Divider>
            <div>
                <Table columns={columns} dataSource={adminMessage}/>
            </div>
            <Modal
              title="提示框"
              visible={isVisable}
              onOk={onOk}
              onCancel={onCancel}
              cancelText="取消"
              okText="确定"
            >
              <p>是否确认删除该管理员？</p>
              <Spin spinning={isLoading}/>
            </Modal>
        </div>
    )
})